<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现十个div换行</title>
    <style>
        div { width:50px; height:50px; background:red; position:absolute; top:0;
            left:0; font-size:30px; text-align:center; line-height:50px; color:#fff;
            float:left;border: 1px solid black}
    </style>
</head>
<body>

</body>

<script>
    window.onload = function (){
        for( var i=0; i<50; i++ ){
            document.body.innerHTML += '<div>' + i + '</div>';
        }

        var aDiv = document.getElementsByTagName('div');

        for( var i=0; i<aDiv.length; i++ ){
            aDiv[i].style.left = 10 + i*50 + 'px';
            if(i%10==0){
                aDiv[i].style.top = (Math.floor(i/10))*50 + 'px';
                aDiv[i].style.left = 0 + 'px';
            }
            if(i%10!=0){
                aDiv[i].style.top = (Math.floor(i/10))*50 + 'px';
                aDiv[i].style.left = (i%10)*50 + 'px';
            }
        }
        // 逢10 往下一行（小练习）
        // 来一个小V字形（小练习）
    };
</script>
</html>
<!--1.此案例向空的body添加50个div，每十个div放一行，放成5行。-->
<!--思路：
1.遍历新加50个div，给div设置css属性，设置为绝对布局，left为0，top为0。这样所有50个div都记在屏幕最左上角
2.遍历这50个div，修改div的css来呈现出要求的十个一行。
-->
